<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/element-ui/element-ui@2.9.1.css">
    <!-- 先引入 Vue -->
    <script src="/static/element-ui/vue@2.6.10.js"></script>
    <!-- 引入组件库 -->
    <script src="/static/element-ui/element-ui@2.9.1.js"></script>
    <script src="/static/js/jquery@3.4.1.min.js"></script>
    <script src="/static/js/jquery.cookie@1.4.1.min.js"></script>

</head>

<body style="height: 100%; margin: 0">
    <div id="app" style="margin-left: 10px; margin-top:10px;">
        <el-button type="default" size="small" @click="goBack"><i class="el-icon-back"></i>返回调度中心</el-button>
        <el-button type="default" size="small" @click="refresh"><i class="el-icon-refresh"></i>刷新</el-button>
    </div>
    
    <div id="container" style="height: 95%"></div>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    

    <script type="text/javascript">
        
        $.get(
            "/scheduler/history",
            { 
                job_id: $.cookie("job_id") 
            },
            function (result) {
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text: result.title,
                        x: 'center',
                        show: true
                    },
                    xAxis: {
                        type: 'category',
                        data: result.keys,
                        name: '时间'
                    },
                    yAxis: {
                        type: "value",
                        name: '执行次数'
                    },
                    series: [{
                        data: result.values,
                        type: 'line',
                        itemStyle: { normal: { label: { show: true } } }

                    }]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            });
            new Vue({
                el: '#app',
                methods: {
                    goBack: function () {
                        window.location.href = "/scheduler-vue";
                    },
                    refresh: function () {
                        window.location.href = "/line-vue";
                    }
                }
            });

    </script>
</body>

</html>